<template>
    <div class="common-layout">
        <n-space class="main-space" vertical>
            <n-layout has-sider>
                <n-layout-sider
                    :collapsed="isOpen"
                    collapse-mode="width"
                    :collapsed-width="64"
                    :width="240"
                    inverted
                    :on-update:collapsed="changeCollapsed"
                >
                    <Nav />
                </n-layout-sider>
                <n-layout>
                    <Header />
                    <PageTabs />
                    <div class="main-content">
                        <router-view></router-view>
                    </div>
                    <div class="footer">2023 © BMS by Daibin Wang.</div>
                </n-layout>
            </n-layout>
        </n-space>
    </div>
</template>

<script setup>
import Header from '@/components/Header/index.vue';
import PageTabs from '@/components/PageTabs/index.vue';
import Nav from '@/components/Nav/index.vue';
import { toRefs } from 'vue';
import { useStore } from '@/store';

const store = useStore();
const { isOpen } = toRefs(store);
const changeCollapsed = val => {
    store.setIsOpen(val);
};
</script>

<style lang="less" scoped>
@import './index.less';
</style>
